<template>
  <div class="luxian">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="line-height: 36px;">路线管理</span>
        <el-button style="float: right;" type="primary" @click="dialogOpen('add')" v-if="USER.auth.indexOf('base_luxian_add')!==-1
">新增路线</el-button>
      </div>
      <s-table
        :expand="false"
        :table="table" ref="table" @http="tableWatch">
        <el-form-item slot="multiSelect" label="多选操作" prop="multiSelect" v-if="table.multiSelect">
          <el-row>
            <el-col :span="8">
              <el-button size="small" type="danger" @click="tableDelete('')" v-if="USER.auth.indexOf('base_luxian_disable')!==-1
">多选删除</el-button>
            </el-col>
          </el-row>
        </el-form-item>
        <el-table-column
          fixed="right"
          align="center"
          slot="operation"
          class-name="operationMore"
          label="可用操作"
          width="120">
          <template scope="s">
            <el-button type="success" icon="edit" size="mini" @click="tableEdit(s.row)" v-if="USER.auth.indexOf('base_luxian_edit')!==-1
"></el-button>
            <el-button type="danger" icon="delete" size="mini" @click="tableDelete(s.row)" v-if="USER.auth.indexOf('base_luxian_disable')!==-1
"></el-button>
          </template>
        </el-table-column>
        <el-form-item label="线路名称" prop="xlmc">
          <el-input type="text"
                    class="input"
                    v-model="autoVue_table_xlmc"
                    placeholder="线路名称" spellcheck="false" auto-capitalize="off" auto-complete="off"
                    auto-correct="off"></el-input>
        </el-form-item>
      </s-table>
    </el-card>
    <s-dialog :dialog="dialog" :close="dialogInit">
      <p slot="title">{{dialog.title}}路线</p>
      <s-form :form="formDialog" ref="formDialog">
        <el-row>
          <el-col :xs="24" :lg="{span: 11, offset: 0}" class="">
            <el-form-item prop="xlmc" label="线路名称">
              <el-input
                type="text"
                v-model="formDialog.xlmc"
                placeholder="线路名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 11, offset: 1}" class="">
            <el-form-item prop="sum" label="集货库位">
              <el-cascader
                v-model="formDialog.sum"
                placeholder="请选择集货库位组"
                :options="dialog.data"
                filterable
              ></el-cascader>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="__table">
          <el-button @click="dialogMxOpen"
                     class="__table_button"><i class="el-icon-plus"></i></el-button>
          <s-table :table="tableDialog" ref='tableDialog' :pagination="false" :control="false" :expand="false" :index="true">
            <el-table-column
              fixed="right"
              align="center"
              slot="operation"
              class-name="operationMore"
              label="操作"
              width="80">
              <template scope="s">
                <el-button type="danger" icon="delete" size="mini" @click="tableDialogDelete(s.$index)"></el-button>
              </template>
            </el-table-column>
          </s-table>
        </div>
      </s-form>
      <el-button slot="footer" @click="dialogSave">保存</el-button>
    </s-dialog>
    <s-dialog :dialog="dialogMx" :close="dialogMxInit" :closeTip="false">
      <p slot="title">{{dialogMx.title}}路线明细</p>
      <s-form :form="formDialogMx" ref="formDialogMx">
        <el-form-item prop="china" label="省/市">
          <el-cascader
            filterable
            change-on-select
            expand-trigger="hover"
            :options="CUSTOMERFILE.china"
            v-model="formDialogMx.china">
          </el-cascader>
        </el-form-item>
      </s-form>
      <el-button slot="footer" @click="dialogMxSave">保存</el-button>
    </s-dialog>
  </div>
</template>
<script>
  import { AutoVue, AutoPromise } from '~/plugins/Tools';
  import {China} from '~/config';

  let ID = 0;
  function __form () {
    return {
      xlmc: { value: '', rule: [ 'vNull' ], cRemarks: '' },
      jhkw: { value: [], rule: [], cRemarks: '' },
      sum: { value: [], rule: [ 'vNull__change' ], cRemarks: '' },
      kwzid: { value: '', rule: [], cRemarks: '' },
    };
  }
  function __formMx () {
    return {
      id:
        { value: ID,
          rule: [] },
      china:
        { value: [],
          rule: [ 'vNullArray2__change' ] },
    };
  }

  export default AutoVue({
    name: 'base_luxian-FEcarWms',
    store: ['USER', 'CUSTOMERFILE'],
    data: {
      table: {
        column: [ { label: '线路名称',
          prop: 'xlmc',
          minWidth: '0px',
          cRemarks: '',
          search: true },
        { label: '集货库位',
          prop: 'jhkw',
          minWidth: '0px',
          cRemarks: '',
          search: false } ],
        url: '/wmsline/list',
        key: 'id',
        tableColumn: 2,
      },

      dialog: {
        title: '新增',
        row: {},
        data: [],
      },
      formDialog: __form(),
      tableDialog: {
        column: [
          {
            label: '省',
            prop: 'sheng',
            minWidth: '0px',
            cRemarks: '',
            search: false,
          },
          {
            label: '市',
            prop: 'shi',
            minWidth: '0px',
            cRemarks: '',
            search: false,
          },
        ],
        key: 'id',
        tableColumn: 2,
      },

      dialogMx: {
        size: 'mini',
      },
      formDialogMx: __formMx(),
    },
    transition: 'slide-fade',
    methods: {
      tableDelete (row) {
        let ids = [];
        if (row) {
          ids.push(row.id);
        } else {
          if (this.table.multipleSelection.length < 1) {
            return this.$alert('您还未选择，请您至少选择一个！', '提示');
          }
          this.table.multipleSelection.forEach(item => {
            ids.push(item.id);
          });
        }
        this.$confirm('您将删除路线。', '确认删除？', {
          confirmButtonText: '是',
          cancelButtonText: '否',
          type: 'warning',
        })
          .then(async _ => {
            try {
              await this.post('/wmsline/zuoFie', {
                ids,
              });
              this.tableWatch('table');
            } catch (err) {
              console.log(err);
            }
          })
          .catch(_ => {
          });
      },
      tableEdit (row) {
        this.dialogOpen('PUT', row);
      },

      dialogInit () {
        this.tableClear('tableDialog');
        this.formDialog = {
          ...this.formDialog,
          ...this.ObjectClone(__form()),
        };
        this.resetFields('formDialog');
      },
      async dialogOpen (type, more) {
        if (type) {
          type = type.toUpperCase();
        } else return;
        switch (type) {
        case 'ADD':
          await AutoPromise([
            async () => {
              this.dialog.data = await this.get('/wmsline/hzSearch');
            },
          ]);
          this.dialog.title = '新增';
          this.formDialog.id = 0;
          break;
        case 'PUT':
          await AutoPromise([
            async () => {
              this.dialog.data = await this.get('/wmsline/hzSearch');
            },
            async () => {
              let {contentList} = await this.get('/wmsline/lingMxSelect/' + more.id);
              this.tableDialog.data = contentList;
            },
          ]);
          this.dialog.title = '修改';
          this.formDialog = {
            ...this.formDialog,
            ...this.ObjectClone(__form(), more),
          };
          this.formDialog.sum = [more.kwzid, more.jhkwid];
          this.dialog.row = more;
          break;
        }
        this.dialog.visible = true;
      },
      tableDialogDelete (index) {
        this.$confirm('您将删除该条明细。', '确认删除？', {
          confirmButtonText: '是',
          cancelButtonText: '否',
          type: 'warning',
        })
          .then(() => {
            this.tableDialog.data.splice(index, 1);
          });
      },
      dialogSave () {
        if (this.dialog.title === '新增') {
          this.VALIDATE('formDialog', async option => {
            option.kwzid = option.sum[0];
            option.jhkw = option.sum[1];
            let list = [];
            this.tableDialog.data.forEach(item => {
              delete item.id;
              list.push(item);
            });
            option.list = list;
            delete option.sum;
            try {
              await this.post('/wmsline/add', option);
              this.dialogInit();
              this.tableWatch('table');
              this.dialog.visible = false;
            } catch (err) {
              console.log(err);
            }
          });
        } else {
          this.VALIDATE('formDialog', async option => {
            option.kwzid = option.sum[0];
            option.jhkw = option.sum[1];
            delete option.sum;
            let list = [];
            this.tableDialog.data.forEach(item => {
              item.id = this.dialog.row.id;
              list.push(item);
            });
            option.list = list;
            try {
              option.id = this.dialog.row.id;
              await this.post('/wmsline/baseUpdateByPrimaryKeySelective', option);
              this.dialogInit();
              this.tableWatch('table');
              this.dialog.visible = false;
            } catch (err) {
              console.log(err);
            }
          });
        }
      },

      dialogMxInit () {
        this.formDialogMx = {
          ...this.formDialogMx,
          ...this.ObjectClone(__formMx()),
        };
        this.resetFields('formDialogMx');
      },
      async dialogMxOpen () {
        this.dialogMx.title = '新增';
        this.dialogMx.visible = true;
      },
      dialogMxSave () {
        this.VALIDATE('formDialogMx', async option => {
          option.sheng = option.china[0];
          option.shi = option.china[1];
          delete option.china;
          this.$message({
            message: '新增路线明细成功',
            type: 'success',
          });
          ID++;
          this.tableDialog.data.push(option);
          this.dialogMxInit();
        });
      },
    },
    mounted: function () {
      this.tableWatch('table');
    },
    fetch (context) {
      let { store } = context;
      store.commit('CUSTOMERFILE/SET', China);
    },
  });
</script>
<style scoped lang="scss">
  .box-card {
    margin: 20px;
  }

  .createTimeSpan {
    display: block;
    margin-top: 34px;
  }

  @media screen and (max-width: 800px) {
    .createTimeSpan {
      margin-top: 0;
    }
    .box-card {
      margin: 0;
    }
  }

  .el-select {
    width: 100%;
  }
</style>
